<template>
  <div class="visitor">
    <div class="tools">
      <Search
        @toSearch="toSearch"
        :placeholder1="placeholder1"
        @reFresh="initList"
      ></Search>
      <span class="tips">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="需等待业主进行审核操作后才能审核"
          placement="right"
        >
          <el-icon><InfoFilled /></el-icon>
        </el-tooltip>
      </span>
    </div>
    <Table
      v-if="refresh"
      :list-data="List"
      @reFresh="initList"
      @sortChange="sortChange"
      @delete="deleteRow"
    >
      <template #column>
        <el-table-column
          prop="visitor_name"
          label="访客发起者"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="visitor_tel"
          label="联系电话"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="building_name"
          label="访问栋数"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="house_plate"
          label="访问门牌号"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="visitor_mine_status"
          label="请求状态"
          min-width="120"
          align="center"
          :filters="[
            { text: '发起', value: 1 },
            { text: '撤回', value: 0 },
          ]"
          :filter-multiple="false"
          :filter-method="filterVisitorMineStatus"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.visitor_mine_status == 1">
              <span>发起</span>
            </el-tag>
            <el-tag type="danger" v-if="scope.row.visitor_mine_status == 0">
              <span>撤回</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="visitor_house_status"
          label="业主审核状态"
          min-width="140"
          align="center"
          :filters="[
            { text: '通过', value: 1 },
            { text: '未读', value: 0 },
            { text: '拒绝', value: 2 },
          ]"
          :filter-multiple="false"
          :filter-method="filterVisitorHouseStatus"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.visitor_house_status === 1">
              <span>通过</span>
            </el-tag>
            <el-tag type="warning" v-if="scope.row.visitor_house_status === 0">
              <span>未读</span>
            </el-tag>
            <el-tag type="danger" v-if="scope.row.visitor_house_status === 2">
              <span>拒绝</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="visitor_status"
          label="物业审核状态"
          min-width="140"
          align="center"
          :filters="[
            { text: '通过', value: 1 },
            { text: '未读', value: 0 },
            { text: '拒绝', value: 2 },
          ]"
          :filter-multiple="false"
          :filter-method="filterVisitorStatus"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.visitor_status === 1">
              <span>通过</span>
            </el-tag>
            <el-tag type="warning" v-if="scope.row.visitor_status === 0">
              <span>未读</span>
            </el-tag>
            <el-tag type="danger" v-if="scope.row.visitor_status === 2">
              <span>拒绝</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="visitor_date"
          sortable="custom"
          label="申请日期"
          min-width="160"
          align="center"
          column-key="visitor_date"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          min-width="120"
        >
          <template #default="scope">
            <el-button
              v-if="
                scope.row.visitor_mine_status === 1 &&
                scope.row.visitor_house_status === 1 &&
                scope.row.visitor_status !== 0
              "
              size="small"
              type="primary"
              @click="changeStatus(scope.$index, scope.row)"
              >审核</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="deleteRow(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </Table>
    <div style="height: 50px">
      <Pagination
        :lockNxt="lockNxt"
        @prePage="prePage"
        @nxtPage="nxtPage"
      ></Pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { nextTick, ref, Ref, watch } from "vue";
import { Visitor } from "../types/listTypes";
import { ElMessage, ElMessageBox } from "element-plus";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import request from "../axios/index";
import Search from "../components/Search.vue";
import Table from "../components/Table.vue";
import Pagination from "../components/Pagination.vue";
import { timeFormat } from "../utils/dateFormat";

export default {
  name: "Lease",
  components: {
    Search,
    Table,
    Pagination,
  },
  setup() {
    //控制刷新显示
    let refresh: Ref<boolean> = ref(true);
    //刷新触发函数
    function toFresh(): void {
      refresh.value = false;
      nextTick(() => {
        refresh.value = true;
      });
    }
    //监听日期排序触发
    function sortChange(order: string): void {
      switch (order) {
        case "ascending":
          getListByAsc();
          break;
        case "descending":
          getList();
          break;
        default:
          getListByAsc();
          break;
      }
    }
    //删除信息
    function deleteRow(index: number, row: Visitor): void {
      ElMessageBox.confirm("是否确认删除该信息")
        .then(() => {
          request
            .post("/admin/visitor/delete", {
              visitorId: row.id,
            })
            .then((res) => {
              if (res.data.code === 200) {
                ElMessage({
                  message: res.data.message,
                  type: "success",
                });
                toFresh();
              } else {
                ElMessage({
                  message: res.data.message,
                  type: "error",
                });
              }
            });
        })
        .catch((err) => {
          ElMessage("已取消删除");
        });
    }
    //发起搜索请求
    async function toSearch(input) {
      try {
        const res = await request.get("/admin/visitor/searchVisitor", {
          params: {
            keywords: input.keyWords,
          },
        });
        List.value = timeFormat(res.data.data, "visitor_date");
      } catch (e) {
        console.error(e);
      }
    }

    //初始化组件内容
    const placeholder1: string = "请输入访客名称";

    //初始化公告列表
    let List: Ref<Visitor[]> = ref([]);

    //初始化列表请求
    function initList(pc: number) {
      pageCount.value = pc;
      getList();
    }
    //获取访客列表(降序)
    function getList(count: number = pageCount.value, page: number = 1): void {
      request
        .get("/admin/visitor/visitorList", {
          params: {
            count: count,
            page: page,
          },
        })
        .then((res) => {
          List.value = timeFormat(res.data.data, "visitor_date");
        });
    }
    //获取访客列表(升序)
    function getListByAsc(): void {
      request
        .get("/admin/visitor/visitorListByAsc", {
          params: {
            count: 10,
            page: 1,
          },
        })
        .then((res) => {
          List.value = timeFormat(res.data.data, "visitor_date");
          ElMessage({
            message: res.data.message,
            type: "success",
          });
        });
    }
    //处理状态筛选
    const filterTag = (value: number, row: Visitor) => {
      return row.visitor_status === value;
    };
    //筛选访客发起状态
    const filterVisitorMineStatus = (value: number, row: Visitor) => {
      return row.visitor_mine_status === value;
    };
    //筛选业主审核状态
    const filterVisitorHouseStatus = (value: number, row: Visitor) => {
      return row.visitor_house_status === value;
    };
    //筛选物业审核状态
    const filterVisitorStatus = (value: number, row: Visitor) => {
      return row.visitor_status === value;
    };
    const filterHandler = (
      value: string,
      row: Visitor,
      column: TableColumnCtx<Visitor>
    ) => {
      const property = column["property"];
      return row[property] === value;
    };
    //表格编辑按钮
    function handleEdit(index, row) {}
    //审核通过
    function changeStatus(index, row) {
      ElMessageBox.confirm("是否通过审核访客信息")
        .then(() => {
          request
            .post("/admin/visitor/changeStatus", {
              visitorId: row.id,
              visitorStatus: 1,
            })
            .then((res) => {
              if (res.data.code === 200) {
                ElMessage({
                  message: res.data.message,
                  type: "success",
                });
                toFresh();
              } else {
                ElMessage({
                  message: res.data.message,
                  type: "error",
                });
              }
            });
        })
        .catch((err) => {
          ElMessage("已取消审核");
        });
    }
    //审核拒绝
    function reject(index, row) {
      ElMessageBox.confirm("是否拒绝审核访客信息")
        .then(() => {
          request
            .post("/admin/visitor/changeStatus", {
              visitorId: row.id,
              visitorStatus: 0,
            })
            .then((res) => {
              if (res.data.code === 200) {
                ElMessage({
                  message: res.data.message,
                  type: "success",
                });
                toFresh();
              } else {
                ElMessage({
                  message: res.data.message,
                  type: "error",
                });
              }
            });
        })
        .catch((err) => {
          ElMessage("已取消审核");
        });
    }

    //分页
    //定义单页数量
    let pageCount: Ref<number> = ref(0);
    //定义锁定下页
    let lockNxt: Ref<boolean> = ref(false);
    //触发上一页
    function prePage(currentPage: number) {
      ElMessage(`第${currentPage}页`);
      getList(pageCount.value, currentPage);
    }
    //触发下一页
    function nxtPage(currentPage: number) {
      ElMessage(`第${currentPage}页`);
      getList(pageCount.value, currentPage);
    }
    //监听页面长度
    watch(
      () => List.value.length,
      (newVal, oldVal) => {
        if (newVal < pageCount.value) {
          lockNxt.value = true;
        } else {
          lockNxt.value = false;
        }
      },
      {
        immediate: true,
      }
    );

    return {
      refresh,
      placeholder1,
      List,
      getListByAsc,
      getList,
      sortChange,
      filterTag,
      filterHandler,
      deleteRow,
      toSearch,
      handleEdit,
      changeStatus,
      reject,
      filterVisitorStatus,
      filterVisitorHouseStatus,
      filterVisitorMineStatus,
      initList,
      lockNxt,
      prePage,
      nxtPage,
    };
  },
};
</script>

<style scoped>
.visitor {
  position: relative;
  width: 98%;
  min-height: 520px;
  background-color: #fff;
}
.tools {
  width: 100%;
  height: 50px;
  overflow: hidden;
}
.tips {
  box-sizing: border-box;
  float: left;
  display: flex;
  align-items: center;
  height: 50px;
}
.avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.userName {
  display: block;
  float: right;
  width: 70px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
